<template>
    <div class="main-wrapper clearfix">
        <!--以下存放搜索结果，以键盘的搜索结果为例子-->
        <!--这里是结果表头部的样式-->
        <div class="main-tape clearfix">
            <div class="result">全部结果</div>
            <i class="iconfont icon-jiantou"></i>
            <div class="research-name">"{{ searchName }}"</div>
        </div>
        <!--以下是存放查询结果的内容-->
        <ul class="main-content">
            <li class="research-item clearfix" v-for="(item,index) in itemList" :key="item.good.goodsId">
                <router-link :to="`/detail/${item.good.goodsId}?seller=${item.userName}`" class="link clearfix">
                    <img v-lazy="item.good.picture" />
                    <ul class="information clearfix">
                        <li class="price-wrapper clearfix">
                            <i class="iconfont icon-renminbi1688"></i>
                            <div class="price">{{ item.good.unitPrice.toFixed(2) }}</div>
                        </li>

                        <li class="seller-wrapper clearfix" v-show="item.userName">
                            <i class="iconfont icon-icon_shouhuodizhi"></i>
                            <div class="seller">{{ item.userName }}</div>
                        </li>

                        <li class="describe-wrapper clearfix">
                            <div class="describe">{{ item.good.goodsName }}</div>
                        </li>
                    </ul>
                    <i class="iconfont icon-jiantou"></i>
                </router-link>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    props:["itemList"],
    computed:{
        searchName(){
            return this.$route.params.keyword;
        }
    },
};
</script>

<style scoped>
/*设置主题内容的大小*/
.main-wrapper {
    width: 1200px;
    background: white;
    margin: 20px auto 0;
    padding-bottom: 20px;
}

/*设置头部的样式*/
.main-tape {
    margin: 30px;
    border-bottom: 1px solid rgb(215, 223, 232);
    padding-bottom: 10px;
    height: 20px;
    line-height: 20px;
}
/*让子元素并排*/
.main-tape > * {
    float: left;
    color: #999;
    margin-right: 5px;
}

.main-tape i {
    font-size: 9px;
}

.main-tape .research-name {
    font-weight: bold;
    color: #666;
}

/*设置搜索结果的列表*/
.main-content {
    margin: 10px 30px;
}
/*设置商品项目的样式*/
.research-item {
    text-align: center;
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 15px;
    /*此行代码用于在聚焦到对应的项目时产生一个互动动画*/
    transition: all 0.3s;
}

.research-item:hover:not(.bottom) {
    transform: translateY(-5px);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.research-item .link {
    color: #333333;
    text-decoration: none;
    display: block;
    box-sizing: border-box;
    height: 160px;
    width: 100%;
    padding: 5px;
    border: 1px solid rgb(215, 223, 232);
    position: relative;
}

.research-item .link > * {
    float: left;
}

/*设置图片的大小*/
.research-item .link img {
    width: 150px;
    height: 150px;
    margin-right: 40px;
}

/*设置商品信息的间距*/
.research-item .link .information {
    width: 800px;
}

.research-item .link .information > li {
    margin-top: 23px;
}

/*设置价钱的样式*/
.research-item .link .information .price-wrapper .icon-renminbi1688,
.research-item .link .information .price-wrapper .price {
    float: left;
    color: red;
    font-size: 25px;
    font-weight: bold;
}

/*设置卖家信息的样式*/
.research-item .link .information .seller-wrapper .icon-icon_shouhuodizhi,
.research-item .link .information .seller-wrapper .seller {
    float: left;
    font-size: 15px;
    margin-left: 10px;
}

.research-item .link .information .seller-wrapper i{
    margin-top: 3px;
}

/*设置商品描述信息的样式*/
.research-item .link .information .describe {
    text-align: left;
    width: 800px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 16px;
}

/*设置商品项目右边箭头的样式*/
.research-item .link .icon-jiantou {
    position: absolute;
    color: rgb(215, 223, 232);
    font-size: 40px;
    line-height: 40px;
    height: 30px;
    top: 0;
    bottom: 0;
    right: 30px;
    margin: auto;
}


</style>